<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html" ; charset="utf-8" />
    <title>财务信息管理</title>
    <link href="../../../css/main.css" rel="stylesheet" type="text/css" />
    <link
      href="../../../bstable/css/bootstrap.min.css"
      rel="stylesheet"
      type="text/css"
    />
    <link
      href="../../../bstable/css/bootstrap-table.css"
      rel="stylesheet"
      type="text/css"
    />

    <style>
      .container22 {
        display: flex;
      }
      .p_line {
        /* padding-bottom: 0; */
        border-bottom: none;
        margin-bottom: 0;
      }
    </style>
  </head>

  <body>
    <div class="tabe_div">
      <p class="p_line text_ient">
        <a class="find_a">日期范围：</a>
        <input
          id="start"
          class="fee-time form_input text_ient start"
          type="date"
          value=""
        />
        -
        <input
          id="end"
          class="fee-time form_input text_ient end"
          type="date"
          value=""
        />
        <input type="button" value="查询" class="but_find" id="search" />
      </p>
      <div class="container22">
        <div id="main2" style="width: 50%; height: 100vh"></div>
        <div id="main" style="width: 50%; height: 100vh"></div>
      </div>
    </div>

    <script src="../../../js/jquery.js"></script>
    <script src="../../../js/common.js"></script>
    <script src="../../../js/echarts.min.js"></script>
    <script src="../../../js/date/js/laydate.js"></script>
    <script src="../../../bstable/js/bootstrap.min.js"></script>
    <script src="../../../bstable/js/bootstrap-table.js"></script>
    <script src="../../../bstable/js/bootstrap-table-zh-CN.min.js"></script>
    <script src="../../../layer_v2.1/layer/layer.js"></script>
    <script type="text/javascript">
      localStorage.setItem("name", "财务管理/业绩监控");

      $("#search").on("click", function () {
        initData();
      });

      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("main"));
      var myChart2 = echarts.init(document.getElementById("main2"));

      initData();
      function initData() {
        $.ajax({
          url: baseUrl + "performance/selectPerformanceMonitoring",
          method: "get",
          headers: {
            Authorization: JSON.parse(localStorage.getItem("userInfo")).token,
          },
          data: {
            startDate: $("#start").val(),
            endDate: $("#end").val(),
          },
          success: function ({ data }) {
            if (data.performanceAveDto.length !== 0) {
              $("#main").show();
              initBar(data);
            } else {
              $("#main").hide();
            }

            if (data.performanceMonitoring.length !== 0) {
              $("#main2").show();
              initPie(data);
            } else {
              $("#main2").hide();
            }
          },
        });
      }

      window.addEventListener("resize", function () {
        myChart.resize();
        myChart2.resize();
      });

      function initBar({ performanceAveDto }) {
        const xAxis = [];
        const allFee = [];
        const aveFee = [];

        performanceAveDto.map((item) => {
          xAxis.push(item.businessTeam);
          allFee.push(item.groupFee);
          aveFee.push(parseInt(item.performanceAvg, 10));
        });

        var option = (option = {
          backgroundColor: "#0A2E5D",
          // title: {
          //     text: '搓板分组柱状图',
          //     textStyle: {
          //         align: 'right',
          //         color: '#fff',
          //         fontSize: 20,
          //     },
          //     top: '5%',
          //     left: 'center',
          // },
          grid: {
            top: "16%",
            bottom: "10%",
            left: "10%",
            right: "5%",
          },
          legend: {
            data: ["平均值", "总业绩"],
            top: "10%",
            x: "center",
            itemWidth: 15,
            textStyle: {
              color: "#1D9EFB",
              fontSize: 10,
            },
          },

          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "shadow",
            },
          },
          xAxis: {
            type: "category",
            //  boundaryGap: true,//坐标轴两边留白
            data: xAxis,
            axisLabel: {
              //坐标轴刻度标签的相关设置。
              textStyle: {
                color: "#fff",
                fontStyle: "normal",
                fontSize: 10,
              },
            },
            axisTick: {
              //坐标轴刻度相关设置。
              show: false,
            },
            axisLine: {
              //坐标轴轴线相关设置
              lineStyle: {
                color: "#fff",
                opacity: 0.2,
              },
            },
            splitLine: {
              //坐标轴在 grid 区域中的分隔线。
              show: false,
            },
          },
          yAxis: [
            {
              type: "value",
              name: "元",
              // min: 0,
              // max: 700,
              axisTick: {
                show: false,
              },
              axisLine: {
                //  改变y轴颜色
                lineStyle: {
                  color: "#fff",
                },
              },
              axisLabel: {
                //  改变y轴字体颜色和大小
                // formatter: '{value} m³ ', //  给y轴添加单位
                textStyle: {
                  color: "#fff",
                  fontSize: 10,
                },
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#0c2c5a", //内容线
                },
              },
            },
            {
              type: "value",
              min: 0,
              max: 100,
              nameTextStyle: {
                color: "#fff",
                fontSize: 10,
              },
              position: "right",

              axisTick: {
                show: false,
              },
              axisLine: {
                show: true,
                lineStyle: {
                  color: "#fff",
                  width: 1,
                },
              },
              axisLabel: {
                show: false,
                formatter: "{value} %", //右侧Y轴文字显示
                textStyle: {
                  color: "#fff",
                  fontSize: 10,
                },
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: "#0c2c5a", //内容线
                },
              },
            },
          ],
          dataZoom: [
            {
              show: false,
              start: 0,
              end: 50,
              type: "inside",
            },
          ],
          series: [
            {
              name: "平均值",
              type: "line",
              symbol: "circle",
              symbolSize: 8,
              itemStyle: {
                normal: {
                  color: new echarts.graphic.LinearGradient(
                    0,
                    0,
                    0,
                    1,
                    [
                      {
                        offset: 0,
                        color: "rgba(0,244,255,1)", // 0% 处的颜色
                      },
                      {
                        offset: 1,
                        color: "rgba(0,77,167,1)", // 100% 处的颜色
                      },
                    ],
                    false
                  ),

                  shadowColor: "rgba(0,160,221,1)",
                },
              },
              markLine: {
                symbol: "none",
                silent: true,
                lineStyle: {
                  normal: {
                    type: "dashed",
                  },
                },
                label: {
                  position: "start",
                },
                data: [
                  {
                    yAxis: aveFee[0],
                    lineStyle: {
                      width: 1.6560000000000001,
                      color: "rgba(0,244,255,1)",
                    },
                    label: {
                      show: true,
                      position: "",
                    },
                  },
                ],
              },
            },
            {
              name: "总收入",
              type: "pictorialBar",
              symbolClip: true,
              symbol: "rect",
              symbolRepeat: true,
              symbolSize: [10, 4], //宽度
              symbolMargin: 1, //间隔
              data: allFee,
              barWidth: 0,
              barGap: 1, //柱间距离

              label: {
                show: true,
                position: "top",
                color: "#fff",
              },

              itemStyle: {
                normal: {
                  show: true,
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                    {
                      offset: 0,
                      color: "rgba(0,77,167,1)",
                    },
                    {
                      offset: 1,
                      color: "rgba(0,77,167,1)",
                    },
                  ]),
                  barBorderRadius: 50,
                  borderWidth: 0,
                },
              },
            },
          ],
        });

        // var option = {
        // color: ['#4cabce', '#e5323e'],
        // tooltip: {},
        // legend: {
        //     data:['总收入', '平均值']
        // },
        // grid: {
        //     left: '2%',
        //     right: '4%',
        //     bottom: '3%',
        //     containLabel: true
        // },
        // xAxis: {
        //     data: xAxis,
        //     axisLabel: {
        //         interval:0,
        //         // 标签的角度
        //         // rotate:40,
        //     },
        // },
        // yAxis: {
        //     show : false,
        // },
        // series: [
        //     {
        //     name: '总收入',
        //     label: {
        //         show: true,
        //         position: 'top'
        //     },
        //     type: 'bar',
        //     data: allFee,
        //     },
        //     {
        //     name: '平均值',
        //     label: {
        //         show: true,
        //         position: 'top'
        //     },
        //     type: 'bar',
        //     data: aveFee,
        //     }
        // ]
        // };
        myChart.setOption(option);
      }

      function initPie({ performanceMonitoring }) {
        // const xAxis = [];
        // const allFee = [];
        const aveFee = [];
        const trainMap = {
          education: "学历提升",
          occupation: "职业资格",
          title: "职称评审",
          train: "执业资格",
        };
        let allFee = 0;

        performanceMonitoring.map((item) => {
          // xAxis.push(item.businessTeam);
          // allFee.push(item.allFee);
          allFee = item.allFee;
          aveFee.push({
            value: item.trainTypeFee,
            name: trainMap[item.trainType],
          });
        });

        var trafficWay = aveFee;

        var img =
          "";

        var data = [];
        var color = [
          "#00ffff",
          "#00cfff",
          "#006ced",
          "#ffe000",
          "#ffa800",
          "#ff5b00",
          "#ff3000",
        ];
        for (var i = 0; i < trafficWay.length; i++) {
          data.push(
            {
              value: trafficWay[i].value,
              name: trafficWay[i].name,
              itemStyle: {
                normal: {
                  borderWidth: 5,
                  shadowBlur: 20,
                  borderColor: color[i],
                  shadowColor: color[i],
                },
              },
            },
            {
              value: allFee / 65,
              name: "",
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                  },
                  labelLine: {
                    show: false,
                  },
                  color: "rgba(0, 0, 0, 0)",
                  borderColor: "rgba(0, 0, 0, 0)",
                  borderWidth: 0,
                },
              },
            }
          );
        }
        var seriesOption = [
          {
            name: "",
            type: "pie",
            clockWise: false,
            radius: [105, 109],
            hoverAnimation: false,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "outside",
                  color: "#ddd",
                  formatter: function (params) {
                    var percent = 0;
                    var total = 0;
                    for (var i = 0; i < trafficWay.length; i++) {
                      total += trafficWay[i].value;
                    }
                    console.log("params", params);
                    percent = ((params.value / allFee) * 100).toFixed(0);
                    if (params.name !== "") {
                      return (
                        params.name +
                        ":" +
                        params.value +
                        "\n" +
                        "\n" +
                        "占百分比：" +
                        percent +
                        "%"
                      );
                    } else {
                      return "";
                    }
                  },
                },
                labelLine: {
                  length: 30,
                  length2: 70,
                  show: true,
                  color: "#00ffff",
                },
              },
            },
            data: data,
          },
        ];
        var option2 = {
          backgroundColor: "#0A2E5D",
          color: color,
          title: {
            text: `总计:${allFee}`,
            top: "48%",
            textAlign: "center",
            left: "49%",
            textStyle: {
              color: "#fff",
              fontSize: 22,
              fontWeight: "400",
            },
          },
          graphic: {
            elements: [
              {
                type: "image",
                z: 3,
                style: {
                  image: img,
                  width: 178,
                  height: 178,
                },
                left: "center",
                top: "center",
                position: [100, 100],
              },
            ],
          },
          tooltip: {
            show: false,
          },
          legend: {
            icon: "circle",
            orient: "horizontal",
            // x: 'left',
            data: ["学历", "职业", "职称", "培训"],
            left: "35%",
            bottom: 80,
            align: "right",
            textStyle: {
              color: "#fff",
            },
            itemGap: 20,
          },
          toolbox: {
            show: false,
          },
          series: seriesOption,
        };

        myChart2.setOption(option2);
      }
    </script>
  </body>
</html>
